import React, { useState } from 'react';
import { message, Form, Input, Button, Row, Col, Modal, Card } from 'antd';
import { ToolFilled, MailFilled, } from '@ant-design/icons';
import { connect } from 'dva';

const AccountSetting = ({ userInfo, dispatch }) => {

  const [form] = Form.useForm();
  const [isModal, setIsModal] = useState(false);

  const updatePwd = (values) => {
    const { password, newPassword, confirmNewPassword } = values;
    if (newPassword !== confirmNewPassword) {
      message.error('两次输入的新密码不一致！');
      return;
    }
    dispatch({
      type: 'accountSetting/updatePwd',
      payload: {
        userId: userInfo.userId,
        password: password,
        newPassword: newPassword,
        userType: userInfo.userType,
      },
      callback: result => {
        if (result.code === 0) {
          setIsModal(false);
          message.success("密码修改成功");
          form.resetFields();
        }
      }
    });

  };

  return (
    <div style={{ marginLeft: "80px", marginTop: "20px" }}>
      <div style={{ fontSize: "20px", marginBottom: "20px", userSelect: 'none', fontWeight: '600' }}>账户设置</div>
      {/* <Card style={{ width: 500, height: 100 }}>
        <Row >
          <Col style={{ fontSize: "18px" }} offset={1} span={9}><MailFilled /> 邮箱</Col>
          <Col span={4} offset={8}>
            <Button disabled onClick={() => { }}>修改邮箱</Button>
          </Col>
        </Row>
      </Card> */}

      <Card style={{ width: 500, height: 100 }} >
        <Row style={{ marginTop: ".1rem" }}>
          <Col style={{ fontSize: "18px", userSelect: 'none' }} offset={1} span={9}><ToolFilled /> 密码</Col>
          <Col span={4} offset={8}>
            <Button key="updatePwd" onClick={() => { setIsModal(true); }} >修改密码</Button>
          </Col>
        </Row>
      </Card>
      <Modal key="updatePwd" title="修改密码" open={isModal} onCancel={() => {
        setIsModal(false);
      }} maskClosable={false}
        footer={[
          <Button key="submit" type="primary" onClick={() => form?.submit()}>确定</Button>,
          <Button key="back" onClick={() => { setIsModal(false); form.resetFields(); }}>取消</Button>
        ]}>
        <Form form={form} name="basic" labelCol={{ span: 6, }}
          wrapperCol={{ span: 16, }} style={{ width: "100%" }} onFinish={updatePwd}>
          <Form.Item label="当前密码" name="password" hasFeedback>
            <Input.Password />
          </Form.Item>
          <Form.Item label="新密码" name="newPassword" rules={[
            {
              required: true,
              message: '请输入用户密码！',
            },
            {
              pattern: /^[A-Za-z0-9!@#$%^&*()\-_=\+\[\]\{\}|;:'",.<>?\\]+$/,
              message: '密码仅允许出现大小写字母、数字和特殊字符！',
            },
            {
              pattern: /^.{6,18}$/,
              message: '用户密码长度为6-18位!',
            }]} hasFeedback>
            <Input.Password />
          </Form.Item>
          <Form.Item label="确认密码" name="confirmNewPassword" hasFeedback>
            <Input.Password />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default connect(({ user }) => ({
  userInfo: user.userInfo
}))(AccountSetting);